import React,{useImperativeHandle,forwardRef,useState} from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import ErrorIcon from '@material-ui/icons/Error';
import WarningIcon from '@material-ui/icons/Warning';
import InfoIcon from '@material-ui/icons/Info';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import ContactSupportIcon from '@material-ui/icons/ContactSupport';
import KeyboardIcon from '@material-ui/icons/Keyboard';


import DangerousInnerHtml from './DangerousInnerHtml';


import imgIconError from "./img/icon-error.gif";
import imgIconInfo from "./img/icon-info.gif";
import imgIconQuestion from "./img/icon-question.gif";
import imgIconWarning from "./img/icon-warning.gif";
import SystemMessage from '../SystemMessage';

const isSmallScreen=window.screen.width<1280;

const GlobalSetting=SystemMessage.globalSetting;
const Const=SystemMessage.const;

const useStyles = makeStyles(theme => ({
    msgBoxWrapper: {
        width: GlobalSetting.boxWidth,
        
        maxHeight: '50%',
        overflow: 'auto'
    },
    titleIcon: {
        marginRight: theme.spacing(1),
        verticalAlign: 'text-bottom'
    },
    error: {
        color: theme.palette.error.main
    },
    warning: {
        color: theme.palette.warning.main
    },
    info: {
        color: theme.palette.primary.main
    },
    success: {
        color: theme.palette.success.main
    },
    confirm: {
        color: theme.palette.primary.main
    },
    input: {
        color: theme.palette.primary.main
    }

    
}));





const SystemMessageBox = (props,ref) => {

    const classes = useStyles();
    
    let TitleIcon = null;
    let imgIcon=null;
    const [thisOption,setThisOption]=useState({
        type:"info"
        ,open:false
        ,description:""
        ,onConfirm:()=>{}
    });

    var isUseImgIcon=true;

    var thisType=thisOption["type"];
    var thisOpen=thisOption["open"];
    var thisDescription=thisOption["description"];
    var thisTitle=thisOption["title"];
    var thisCause=thisOption["cause"];
    var thisAction=thisOption["action"];
    var thisOnConfirm=thisOption["onConfirm"];

    var thisDescriptions=Array.isArray(thisDescription)?thisDescription:[thisDescription];
    var thisCauses=Array.isArray(thisCause)?thisCause:[thisCause];
    var thisActions=Array.isArray(thisAction)?thisAction:[thisAction];

    var printEnabled=props["printEnabled"]===undefined?GlobalSetting.printEnabled:props["printEnabled"];
    var codeVisible=props["codeVisible"]===undefined?GlobalSetting.codeVisible:props["codeVisible"];
    var language=props["language"]||GlobalSetting.language;
    var thisBigFontSize=props["bigFontSize"]||GlobalSetting.bigFontSize;
    var thisSmallFontSize=props["smallFontSize"]||GlobalSetting.smallFontSize;

    var thisConfirmButtonText=props["confirmButtonText"]||GlobalSetting.confirmButtonText;
    var thisPrintButttonText=props["printButtonText"]||GlobalSetting.printButtonText;

    var thisFontSize=isSmallScreen?thisSmallFontSize:thisBigFontSize;

    if(language!==Const.LANGUAGE_ENG&&language!==Const.LANGUAGE_CHI){
        language=Const.LANGUAGE_ENG;
    }

    

    switch (thisType.toLowerCase()) {
        case "error":
            TitleIcon = ErrorIcon;
            imgIcon=imgIconError;
            break;
        case "warning":
            TitleIcon = WarningIcon;
            imgIcon=imgIconWarning;
            break;
        case "info":
            TitleIcon = InfoIcon;
            imgIcon=imgIconInfo;
            break;
        case "success":
            TitleIcon = CheckCircleIcon;
            break;
        case "confirm": 
            TitleIcon = ContactSupportIcon;
            imgIcon=imgIconQuestion
            break;
        case "input":
            TitleIcon = KeyboardIcon;
            break;
        default: 
            TitleIcon = InfoIcon;
            break;

    }

    const _show=(type,title,description,cause,action,onConfirm)=>{
        thisOption["open"]=true;
        thisOption["title"]=title;
        thisOption["description"]=description;
        thisOption["cause"]=cause;
        thisOption["action"]=action;
        thisOption["type"]=type;
        thisOption["onConfirm"]=onConfirm||(()=>{
            thisOption["open"]=false;
            setThisOption({...thisOption});
         });
        setThisOption({...thisOption});
    };

    const _showMessage=(type,messageObj,onConfirm)=>{
        var langPrefix=language;
        var msgKey=messageObj["functionId"]+"-"+messageObj["severityCode"]+"-"+messageObj["messageCode"];
        var title=codeVisible?"Message Code:"+msgKey :messageObj[langPrefix+"MessageHeader"];
        thisOption["open"]=true;
        thisOption["title"]=title;
        thisOption["description"]=messageObj[langPrefix+"Description"]||"";
        thisOption["cause"]=messageObj[langPrefix+"Cause"]||"";
        thisOption["action"]=messageObj[langPrefix+"Action"]||"";
        thisOption["type"]=type;
        thisOption["onConfirm"]=onConfirm||(()=>{
            thisOption["open"]=false;
            setThisOption({...thisOption});
         });
        setThisOption({...thisOption});
    };

    useImperativeHandle(ref, () => ({   
        alert: (title,message,cause,action,onConfirm)=>{
            _show("warning",title,message,cause,action,onConfirm)
        },
        info: (title,message,cause,action,onConfirm)=>{
            _show("info",title,message,cause,action,onConfirm)
        },
        confirm: (title,message,cause,action,onConfirm)=>{
            _show("question",title,message,cause,action,onConfirm)
        },
        error: (title,message,cause,action,onConfirm)=>{
            _show("error",title,message,cause,action,onConfirm)
        },
        show: (type,title,message,cause,action,onConfirm)=>{
            _show(type,title,message,cause,action,onConfirm)
        },

        alertMessage: (messageObj,onConfirm)=>{
            _showMessage("warning",messageObj,onConfirm)
        },
        infoMessage: (messageObj,onConfirm)=>{
            _showMessage("info",messageObj,onConfirm)
        },
        confirmMessage: (messageObj,onConfirm)=>{
            _showMessage("question",messageObj,onConfirm)
        },
        errorMessage: (messageObj,onConfirm)=>{
            _showMessage("error",messageObj,onConfirm)
        },
        showMessage: (type,messageObj,onConfirm)=>{
            _showMessage(type,messageObj,onConfirm)
        },
        close:()=>{
            thisOption["open"]=false;
            setThisOption({...thisOption});
        }
      }))


    return (
        <Dialog
            open={thisOpen}
            // onClose={props.closeClicked}
            onClose={props.submitClicked? null: props.closeClicked}
            maxWidth="md"
            PaperProps={{
                className: classes.msgBoxWrapper,
                name:"MsgBox"
            }}
            name="MsgBox"
        >
            <DialogTitle className={classes[thisType]}><span style={{fontSize:"18px"}}>{thisTitle}</span></DialogTitle>
            <DialogContent name="MsgBoxContent">
                <div style={{float:"left",width:"10%"}} >{isUseImgIcon?<img src={imgIcon} alt={thisType} />:<TitleIcon className={classes.titleIcon}></TitleIcon> }</div>
                <div style={{float:"left",width:"85%", marginLeft:"5%"}} >
                {
                    thisDescriptions.map((val, idx) => {
                        return (
                                <DangerousInnerHtml html={val} key={idx} style={{fontSize:thisFontSize,marginTop:"10px"}}/>
                         )
                    })
                }
                {
                    
                    thisCauses.map((val, idx) => {
                        return (
                                <DangerousInnerHtml html={val} key={idx} style={{fontSize:thisFontSize,marginTop:"10px",color:"#454545"}}/>
                         )
                    })
                }
                {
                    thisActions.map((val, idx) => {
                        return (
                                <DangerousInnerHtml html={val} key={idx} style={{fontSize:thisFontSize,marginTop:"10px",color:"darkblue"}}/>
                         )
                    })
                }
                </div>
                
            </DialogContent>
            <DialogActions name="MsgBoxActions" style={{display:"block",marginTop:"10px"}}>
                
                    {(printEnabled && <Button name="PrintBtn"  onClick={() => {  }} variant="outlined" >{thisPrintButttonText}</Button>)}
                    <Button name="confirmBtn" onClick={() => { thisOnConfirm() }} variant="outlined" style={{float:"right"}}>{thisConfirmButtonText}</Button>
                     
                
                
            </DialogActions>
        </Dialog>
    )
}




export default forwardRef(SystemMessageBox);